<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Food</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="header">
        <div class="header__left-block">
            <div class="header__logo">
                <img src="icons/logo.svg" alt="Логотип">
            </div>
            <nav class="header__links">
                <a href="#" class="header__link">Доставка питания</a>
                <a href="#" class="header__link">Второй пункт</a>
            </nav>
        </div>
        <div class="header__right-block">
            <button data-modal class="btn btn_white">Связаться с нами</button>
        </div>
    </header>
    <div class="sidepanel">
        <div class="sidepanel__text"><span>Социальные сети</span></div>
        <div class="sidepanel__divider"></div>
        <a href="#" class="sidepanel__icon">
            <img src="icons/instagram.svg" alt="instagram">
        </a>
        <a href="#" class="sidepanel__icon">
            <img src="icons/facebook.svg" alt="facebook">
        </a>
    </div>

    <div class="preview">
        <div class="bgc_blue"></div>
        <div class="container">
            <div class="tabcontainer">
                <div class="tabcontent">
                    <img src="img/tabs/vegy.jpg" alt="vegy">
                    <div class="tabcontent__descr">
                        Меню "Фитнес" - это новый подход к приготовлению блюд: больше свежих овощей и фруктов. Для людей, которые интересуются спортом; активных и здоровых. Это абсолютно новый продукт с оптимальной ценой и высоким качеством!
                    </div>
                </div>
                <div class="tabcontent">
                    <img src="img/tabs/elite.jpg" alt="elite">
                    <div class="tabcontent__descr">
                        Меню “Премиум” - мы используем не только красивый дизайн упаковки, но и качественное исполнение блюд. Красная рыба, морепродукты, фрукты - ресторанное меню без похода в ресторан!                                     
                    </div>
                </div>
                <div class="tabcontent">
                    <img src="img/tabs/post.jpg" alt="post">
                    <div class="tabcontent__descr">
                        Наше специальное “Постное меню” - это тщательный подбор ингредиентов: полное отсутствие продуктов животного происхождения. Полная гармония с собой и природой в каждом элементе! Все будет Ом!                                     
                    </div>
                </div>
                <div class="tabcontent">
                    <img src="img/tabs/vegy.jpg" alt="vegy">
                    <div class="tabcontent__descr">
                        Меню "Сбалансированное" - это соответствие вашего рациона всем научным рекомендациям. Мы тщательно просчитываем вашу потребность в к/б/ж/у и создаем лучшие блюда для вас.
                    </div>
                </div>
                <div class="tabheader">
                    <h3>Выберите стиль питания</h3>
                    <div class="tabheader__items">
                        <div class="tabheader__item tabheader__item_active">Фитнес</div>
                        <div class="tabheader__item">Премиум</div>
                        <div class="tabheader__item">Постное</div>
                        <div class="tabheader__item">Сбалансированное</div>
                    </div>
                </div>
            </div>
            <div class="preview__life">Живи полной жизнью!</div>
        </div>
    </div>

    <div class="divider"></div>

    <div class="offer">
        <div class="bgc_y"></div>
        <div class="container">
            <div class="offer__text">
                <h2 class="title">Что мы можем вам предложить?</h2>
                <div class="offer__descr">
                    Наша основная идея - это правильное питание. Оно может быть простым и вкусным. Мы не просто доставка, мы сервис! Мы взяли на себя все расчеты БЖУ, калорийности, объемов порций и прочие важные, но скучные аспекты. Вам остается только полезная, сытная и правильная еда, которую мы привозим прямо под дверь.
                </div>
            </div>
            <div class="offer__action">
                <button data-modal class="btn btn_dark">Связаться с нами</button>
            </div>
        </div>
        <div class="container">
            <div class="offer__advantages">
                <h2>Быстро и полезно</h2>
                <div class="offer__advantages-text">
                    Готовка дома занимает много сил, времени и нервов. Мы привозим еду сразу на целый день, и ты можешь действовать так, как тебе удобно, не подстраиваясь ни под кого и будучи уверенным в качестве продукта!
                </div>
                <h2>Правильный рацион</h2>
                <div class="offer__advantages-text">
                    Мы разработали специальное меню, где учтены все нюансы правильного питания, от баланса БЖУ до их приготовления и дробления рациона.
                </div>
            </div>
            <div class="offer__slider">
                <div class="offer__slider-counter">
                    <div class="offer__slider-prev">
                        <img src="icons/left.svg" alt="prev">
                    </div>
                    <span id="current">03</span>
                    /
                    <span id="total">04</span>
                    <div class="offer__slider-next">
                        <img src="icons/right.svg" alt="next">
                    </div>
                </div>
                <div class="offer__slider-wrapper">
                    <div class="offer__slider-inner">
                        <div class="offer__slide">
                            <img src="img/slider/pepper.jpg" alt="pepper">
                        </div>
                        <div class="offer__slide">
                            <img src="img/slider/food-12.jpg" alt="food">
                        </div>
                        <div class="offer__slide">
                            <img src="img/slider/olive-oil.jpg" alt="oil">
                        </div>
                        <div class="offer__slide">
                            <img src="img/slider/paprika.jpg" alt="paprika">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="divider"></div>

    <div class="calculating">
        <div class="container">
            <h2 class="title">Рассчитаем вашу потребность в калориях?
            </h2>
            <div class="calculating__field">
                <div class="calculating__subtitle">
                    Ваш пол
                </div>
                <div class="calculating__choose" id="gender">
                    <div id="female" class="calculating__choose-item calculating__choose-item_active">Женщина</div>
                    <div id="male" class="calculating__choose-item">Мужчина</div>
                </div>

                <div class="calculating__subtitle">
                    Ваша конституция
                </div>
                <div class="calculating__choose calculating__choose_medium">
                    <input type="text" id="height" placeholder="Введите рост" class="calculating__choose-item">
                    <input type="text" id="weight" placeholder="Введите вес"  class="calculating__choose-item">
                    <input type="text" id="age" placeholder="Введите возраст" class="calculating__choose-item">
                </div>

                <div class="calculating__subtitle">
                    Выберите вашу физическую активность
                </div>
                <div class="calculating__choose calculating__choose_big">
                    <div data-ratio="1.2" id="low" class="calculating__choose-item">Низкая активность </div>
                    <div data-ratio="1.375" id="small"  class="calculating__choose-item calculating__choose-item_active">Невысокая активность</div>
                    <div data-ratio="1.55" id="medium" class="calculating__choose-item">Умеренная активность</div>
                    <div data-ratio="1.725" id="high" class="calculating__choose-item">Высокая активность</div>
                </div>

                <div class="calculating__divider"></div>

                <div class="calculating__total">
                    <div class="calculating__subtitle">
                        Ваша суточная норма калорий:
                    </div>
                    <div class="calculating__result">
                        <span>2700</span> ккал
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="divider"></div>

    <div class="menu">
        <h2 class="title">Наше меню на день</h2>

        <div class="menu__field">
            <div class="container"></div>
        </div>
    </div>

    <div class="order">
        <div class="container">
            <div class="title">Заказывай пробный день прямо сейчас!</div>
            <form action="#" class="order__form">
                <input required placeholder="Ваше имя" name="name" type="text" class="order__input">
                <input required placeholder="Ваш номер телефона" name="phone" type="phone" class="order__input">
                <img src="icons/right.svg" alt="right">
                <button class="btn btn_dark btn_min">Перезвонить мне</button>
            </form>
        </div>
    </div>

    <div class="divider"></div>

    <div class="promotion">
        <div class="bgc_y"></div>
        <div class="container">
            <div class="promotion__text">
                <div class="title">Акция для новых клиентов!</div>
                <div class="promotion__descr">
                    Мы ценим каждого клиента и предлагаем вам стать одним из них на очень выгодных условиях. 
                    Каждому, кто закажет доставку питание на неделю, будет предоставлена скидка в размере <span>20%!</span>
                    <br><br>
                    Акция закончится 20 мая в 00:00
                </div>
            </div>
            <div class="promotion__timer">
                <div class="title">Осталось до конца акции:</div>
                <div class="timer">
                    <div class="timer__block">
                        <span id="days">12</span>
                        дней
                    </div>
                    <div class="timer__block">
                        <span id="hours">20</span>
                        часов
                    </div>
                    <div class="timer__block">
                        <span id="minutes">56</span>
                        минут
                    </div>
                    <div class="timer__block">
                        <span id="seconds">20</span>
                        секунд
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="container">
            <div class="social">
                <div class="subtitle">Мы в социальных сетях:</div>
                <a href="#" class="link">instagram</a>
                <a href="#" class="link">facebook</a>
            </div>
            <div class="pepper">
                <img src="icons/veg.svg" alt="pepper">
            </div>
            <div class="call">
                <div class="subtitle">Или позвоните нам</div>
                <a href="#" class="link">+380678341034</a>
                <a href="#" class="link">+380500941356</a>
            </div>
        </div>
    </footer>

    <div class="modal">
        <div class="modal__dialog">
            <div class="modal__content">
                <form action="#">
                    <div data-close class="modal__close">&times;</div>
                    <div class="modal__title">Мы свяжемся с вами как можно быстрее!</div>
                    <input required placeholder="Ваше имя" name="name" type="text" class="modal__input">
                    <input required placeholder="Ваш номер телефона" name="phone" type="phone" class="modal__input">
                    <button class="btn btn_dark btn_min">Перезвонить мне</button>
                </form>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.5/axios.min.js" integrity="sha512-nnNHpffPSgINrsR8ZAIgFUIMexORL5tPwsfktOTxVYSv+AUAILuFYWES8IHl+hhIhpFGlKvWFiz9ZEusrPcSBQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="js/bundle.js"></script>
</body>
</html>